<script setup lang="ts" name="Lottery">
import { storeToRefs } from 'pinia'
import LuckyWheel1 from './components/LuckyWheel/LuckyWheel1.vue'
import LuckyWheel2 from './components/LuckyWheel/LuckyWheel2.vue'
import LuckyWheel3 from './components/LuckyWheel/LuckyWheel3.vue'
import LuckyWheel4 from './components/LuckyWheel/LuckyWheel4.vue'
import LuckyGrid1 from './components/LuckyGrid/LuckyGrid1.vue'
import LuckyGrid2 from './components/LuckyGrid/LuckyGrid2.vue'
import LuckyGrid3 from './components/LuckyGrid/LuckyGrid3.vue'
import LuckyGrid4 from './components/LuckyGrid/LuckyGrid4.vue'
import SlotMachine1 from './components/SlotMachine/SlotMachine1.vue'
import SlotMachine2 from './components/SlotMachine/SlotMachine2.vue'
import SlotMachine3 from './components/SlotMachine/SlotMachine3.vue'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
</script>

<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-alert title="使用lucky-canvas抽奖插件实现的相关功能，https://github.com/buuing/lucky-canvas。" type="success" :closable="false" show-icon />
      <el-row :gutter="systemConfig.space">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyWheel1 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyGrid1 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <SlotMachine1 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyWheel2 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyGrid2 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <SlotMachine2 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyWheel3 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyGrid3 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <SlotMachine3 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyWheel4 />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <LuckyGrid4 />
        </el-col>
      </el-row>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);
  }
}

.el-card.no-padding {
  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>
